<!-- 这个文件是对饼图进行封装 -->
<!-- <template>

  <div style="width: 100%; height: 100%; position: relative">
    <div :id="idname" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    inname: {
      type: String,
      require: true,
    },
    datalist: {
      type: Object,
      default: function () {
        return {
          title: [],
          data: [],
        };
      },
    },
  },
  data(){
    return{
      datalist_pie:{
        title:[

        ]
      }
    }
  }
};
</script> -->

<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div
      class="pie"
      :style="{ border: `1px dashed ${color}` }"
      :id="idname"
    ></div>
  </div>
</template>
  <script>
import echarts from "echarts";
export default {
  name: "echartPie",
  props: {
    color: {
      require: true,
      type: String,
    },
    datalist: {
      type: Object,
      default: function () {
        return {
          title: [],
          data: [],
        };
      },
    },
    idname: {
      require: true,
      type: String,
    },
  },
  created() {},
  mounted() {
    var myChart = echarts.init(document.getElementById(`${this.id}main`));

    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法，进行一个适配适配
      myChart.resize();
    });
    myChart.setOption({
      //圆环里面标题的一个配置
      title: [
        {
          text: this.number,
          subtext: this.textbox,
          subtextStyle: {
            color: "#fff",
            fontSize: 9,
          },
          textAlign: "center",
          left: "49%",
          top: "25%",
          textStyle: {
            color: this.color,
            fontSize: 9,
          },
        },
      ],
      //多个圆环进行的一个嵌套
      series: [
        {
          type: "pie",
          radius: ["76%", "77%"],
          labelLine: {
            show: false,
          },
          emphasis: {
            disabled: true,
          },
          itemStyle: {
            color: this.color,
          },
          data: [
            {
              value: 100,
            },
          ],
        },
        {
          type: "pie",
          zlevel: 1,
          //起始角度
          startAngle: -90,
          radius: ["67%", "80%"],
          avoidLabelOverlap: false,

          labelLine: {
            show: false,
          },
          emphasis: {
            disabled: true,
          },
          data: [
            {
              value: 500,
              itemStyle: {
                color: this.color,
              },
              label: {
                show: false,
              },
            },
            {
              name: "",
              label: {
                show: false,
              },
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              value: 500,
            },
          ],
        },
      ],
    });
  },
  methods: {},
};
</script>
  
  <style scoped>
.pie {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 1px dashed red;
  color: aliceblue;
}
